<template>
  <div class="head_bg">
    <label>欢迎来到管理系统</label>
    <el-popover
      placement="bottom"
     
      :width="100"
      trigger="click">
      <template #reference>
        <el-avatar
          size="25"
          :src="phothUrl"
          fit="cover"
          :style="{ backgroundColor: 'transparent' }"
          @error="errorHandler"
        />
      </template>
      <div class="head_option" @click="loginout">退出登录</div>
    </el-popover>
  </div>
</template>
<script lang="ts">
import { useRouter } from 'vue-router';
  import { clearUserSession } from '@/util/session.js';
export default{
    setup(){
        const router = useRouter()
        var phothUrl = require("../images/icon_default_photo.png");
        const errorHandler = () => {
        phothUrl = require("../images/icon_default_photo.png");
        };
        const loginout=()=>{
            clearUserSession("user")
            router.replace("/login")
        }
        return {phothUrl,errorHandler,loginout}
    }
}

</script>

<style lang="less">
.head_bg {
  background-color: #e5fbff;
  height: 100%;
  display: flex;
  flex-flow: row nowrap;
  padding: 0 16px;
  justify-content: space-between;
  align-items: center;
}
.el-header {
  --el-header-padding: 0;
}
.head_option{
     display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
}
</style>
